<template>
    <div id="SearchSeat">
        <!-- 表单 -->
        <van-form>
            <DemoBlock title="选择日期">
                <van-field readonly clickable name="datetimePicker" :value="dateFormatUtil('YYYY-mm-dd', reserverDate)"
                    label="预约日期" placeholder="点击选择时间" @click="datetimePicker1 = true" />
                <!-- :min-date="minDate" :max-date="maxDate" -->
                <van-popup v-model="datetimePicker1" position="bottom">
                    <van-datetime-picker type="date" title="选择年月日" @confirm="onConfirm3" :formatter="formatter"
                        v-model="reserverDate" />
                </van-popup>
            </DemoBlock>

            <DemoBlock title="选择时段">
                <van-field readonly clickable name="datetimePicker" :value="startTime" label="开始时间" placeholder="点击选择时间"
                    @click="showPicker1 = true" />
                <van-popup v-model="showPicker1" position="bottom">
                    <van-datetime-picker type="time" title="选择时间" @confirm="onConfirm1" @cancel="showPicker1 = false" />
                </van-popup>

                <van-field readonly clickable name="datetimePicker" :value="endTime" label="结束时间" placeholder="点击选择时间"
                    @click="showPicker2 = true" />
                <van-popup v-model="showPicker2" position="bottom">
                    <van-datetime-picker type="time" title="选择时间" @confirm="onConfirm2" @cancel="showPicker2 = false" />
                </van-popup>
            </DemoBlock>

            <div style="margin: 16px">
                <van-button round block type="info" color="linear-gradient(to right, #ff6034, #ee0a24)" native-type="button" @click="onSubmit">查询</van-button>
            </div>
        </van-form>

        <DemoBlock v-if="showList" title="座位列表">
            <van-list finished-text="没有更多了">
                <van-cell v-for="item in seatList" :key="item.id" :title="item.abbreviation"
                    :to="{ name:'Seat', query:{sid:item.id} }" is-link>
                    <span>{{ item.classroomName }}</span> <!-- style="color: black; font-weight: bold;"-->
                    <span>&nbsp;&nbsp; / &nbsp;&nbsp;</span>
                    <span>{{ item.floorName }}</span>
                </van-cell>
            </van-list>
        </DemoBlock>
    </div>
</template>

<script>
    import DemoBlock from "@/components/DemoBlock.vue";
    export default {
        name: "Login",
        components: {
            DemoBlock,
        },
        data() {
            return {
                showPicker1: false,
                showPicker2: false,
                startTime: "",
                endTime: "",
                reserverDate: new Date(),
                datetimePicker1: false,

                seatList: [],
                showList: false,


            };
        },
        methods: {
            onConfirm1(time) {
                this.startTime = time;
                this.showPicker1 = false;
            },
            onConfirm2(time) {
                this.endTime = time;
                this.showPicker2 = false;
            },
            onConfirm3(date) {
                this.reserverDate = date;
                this.datetimePicker1 = false;
            },
            formatter(type, val) {
                if (type === "year") {
                    return val + "年";
                }
                if (type === "month") {
                    return val + "月";
                }
                if (type === "day") {
                    return val + "日";
                }
                return val;
            },
            dateFormatUtil(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(), // 年
                    "m+": (date.getMonth() + 1).toString(), // 月
                    "d+": date.getDate().toString(), // 日
                    "H+": date.getHours().toString(), // 时
                    "M+": date.getMinutes().toString(), // 分
                    "S+": date.getSeconds().toString(), // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(
                            ret[1],
                            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
                        );
                    }
                }
                return fmt;
            },
            onSubmit() {
                // 处理数据
                let sTime =
                    this.dateFormatUtil("YYYY-mm-dd", this.reserverDate) +
                    " " +
                    this.startTime +
                    ":00";
                let eTime =
                    this.dateFormatUtil("YYYY-mm-dd", this.reserverDate) +
                    " " +
                    this.endTime +
                    ":00";
                console.log({
                    startTime: sTime,
                    endTime: eTime,
                });
                // this.$notify('发送请求');
                // 发送请求
                this.$axios
                    .post("/api/seatlist/seat/freeByTimePeriod", {
                        startTime: sTime,
                        endTime: eTime,
                    })
                    .then((response) => {
                        console.log(response);
                        if (response.data.code != 200) {
                            this.$notify('系统错误');
                            return;
                        }

                        this.showList = true;
                        this.seatList = response.data.data;


                    })
                    .catch((error) => {
                        this.$notify('网络异常');
                        console.log(error);
                    });
            },
        },
        created() {},
    };
</script>

<style>
    #SearchSeat {
        background-color: #f7f8fa;
    }
</style>
